<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <!-- 引入layui核心样式 -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
    <!-- 引入layui核心JS-->
    <script src="../../lib/layui/layui.js"></script>
    <link rel="stylesheet" href="../../css/form.css"/>
</head>
<body>
<form class="layui-form personal-form">
    <div class="layui-form-item">
        <label class="layui-form-label">
            原密码<span class="required">*</span>
        </label>
        <div class="layui-input-inline">
            <input type="password" name="oldPassword" placeholder="请输入原密码" lay-affix="eye"
                   lay-verify="required" lay-reqtext="请输入原密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            新密码<span class="required">*</span>
        </label>
        <div class="layui-input-inline">
            <input type="password" name="newPassword" placeholder="请输入新密码" lay-affix="eye" id="newPassword"
                   lay-verify="required|checkNewPassword" lay-reqtext="请输入新密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            确认密码<span class="required">*</span>
        </label>
        <div class="layui-input-inline">
            <input type="password" name="rePassword" placeholder="请输入确认密码" lay-affix="eye"
                   lay-verify="required|checkRePassword" lay-reqtext="请输入确认密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item personal-form-btn-box">
        <div class="layui-input-inline">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="button" class="layui-btn" lay-submit lay-filter="updatePassword">确认</button>
        </div>
    </div>
</form>
</body>
<script>
    let form = layui.form
    let layer = layui.layer
    let $ = layui.$
    // 密码规则：必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线
    const pattern = new RegExp(/^[a-zA-Z]\w{5,14}$/);

    layui.use(function () {
        // 定义layui的表单校验规则
        form.verify({
            'checkNewPassword': function (value) {
                if (!pattern.test(value)) {
                    return '密码必须以字母开头，长度在6~15之间，只能包含字母、数字和下划线'
                }
            },
            'checkRePassword': function (value) {
                if (value !== $('#newPassword').val()) {
                    return '确认密码与新密码必须一致'
                }
            }
        })

        // 定义layui的表单提交事件
        form.on('submit(updatePassword)', function (data) {
            let field = data.field
            field.type = 'updatePassword'
            $.ajax({
                url: '/soms/server/user',
                type: 'POST',
                data: field,
                success: function (result) {
                    if (result.code === 200 || result.code === 401) {
                        // 注销
                        parent.logout()
                    } else {
                        layer.msg(result.msg, {icon: 2})
                    }
                },
                error: function (error) {
                    layer.msg('请求失败', {icon: 2})
                }
            })
            return false
        })
    })
</script>
</html>